<template>
  <div class="nav-menu-index-wrapper">
    <div v-show="navMenus && navMenus.length">
      <!-- <el-row :gutter="0" > -->
      <!-- <el-col :sm="collapseMenu?1:4" :md="collapseMenu?1:4" :lg="collapseMenu?1:4" :xl="collapseMenu?1:3" class="hidden-sm-and-down app-sidebar"> -->
        <div :class="['sidebar-wrapper', {'fold': collapseMenu}]">
          <nav-menu-left :menus="navMenus" :activeMenu="activeMenu" @on-select-menu="selectMenu" :isCollapse="collapseMenu"></nav-menu-left>
          <div :class="{'icon-fold':!collapseMenu,'icon-unfold':collapseMenu,'collapse-icon':true,iconfont:true}" @click="collapseMenu = !collapseMenu"></div>
        </div>
      <!-- </el-col> -->
      <!-- <el-col :xs="24" :sm="collapseMenu?23:20" :md="collapseMenu?23:20" :lg="collapseMenu?23:20" :xl="collapseMenu?23:21" class="app-content"> -->
        <div  class="content-wrapper">
          <router-view></router-view>
        </div>
      <!-- </el-col> -->
      <!-- </el-row> -->
    </div>
    <el-drawer
      custom-class="menu-drawer"
      title="我是标题"
      :visible.sync="menuDrawer"
      direction="ltr"
      @close="toggleSideBar"
      :with-header="false">
        <div :class="['drawer-sidebar-wrapper']">
          <nav-menu-left :menus="allMenus" :activeMenu="activeMenu" @on-select-menu="selectDrawerMenu" :isCollapse="collapseMenu"></nav-menu-left>
        </div>
    </el-drawer>
  </div>
</template>

<script>
import NavMenuLeft from "../../../../layout/partial/sidebar/NavMenuLeft";
import { mapState, mapActions } from 'vuex';
export default {
  name: 'NavMenuIndex',
  components:{NavMenuLeft},
  watch: {
    $route(to) {
      this.initPage(to.path);
    },
    sidebar(val){
      if(val) {
        this.collapseMenu = false;
      }
      this.menuDrawer = val;
    }
  },
  data() {
    return {
      activeMenu: '',
      navMenus: [],
      allMenus:[],
      collapseMenu:false,
      menuDrawer:false,
      menuRelation:{
        dictionarydata:"dictionarymanage"
      }
    }
  },
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar
    })
  },
  mounted() {
    let path = this.$route.path;
    this.initPage(path);
  },
  methods: {
    ...mapActions('app', ["toggleSideBar", "setActiveMenu"]),
    initPage(path) {
      let paths = path.split('/').slice(1);
      // this.activeMenu = paths[paths.length - 1];
      let activeMenu = paths[paths.length - 1];
      this.activeMenu = this.menuRelation[activeMenu] ? this.menuRelation[activeMenu] : activeMenu;
      if (this.navMenus.length !== 0) {return;}
      if (sessionStorage.getItem("submenus") == null || sessionStorage.getItem("submenus") == undefined) {
        //如果没有左侧菜单做其他处理
        return;
      }
      this.navMenus = JSON.parse(sessionStorage.getItem("submenus"));
      this.allMenus = JSON.parse(sessionStorage.getItem("menus"));
    },
    selectMenu(id) {
      this.activeMenu = id;
      this.recursionMenu(this.navMenus,id);
    },
    selectDrawerMenu(id){
      this.activeMenu = id;
      this.recursionMenu(this.allMenus, id);
      this.allMenus.forEach(menu => {
        if(this.findCurrentMenu(menu, id)){
          this.setActiveMenu(menu.id);
          sessionStorage.setItem('submenus', JSON.stringify(menu.children || []));
        }
      })
      this.toggleSideBar();
    },
    findCurrentMenu(menu, id){
      if(menu.id === id){
        return true;
      }
      let arr = menu.children || [];
      for(let i = 0; i < arr.length; i++){
        let d = arr[i];
        if(d.id === id){
          return true;
        }
        if(d.children && d.children.length !== 0){
          return this.findCurrentMenu(d.children, id);
        }
      }
      return false;
    },
    recursionMenu(menu,id){
      menu.forEach((d) => {
        if(d.children && d.children.length !== 0){
          this.recursionMenu(d.children,id);
        }else{
          d.id === id ? (d.active = true, this.$router.push({
            path: d.path
          })) : (d.active = false);
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '../../../../assets/styles/base_style';
  .menu-drawer{
    width:$sidebarWidth!important;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../../../assets/styles/base_style';
$collapseIconWidth:40px;
$collapsePad:15px;
.nav-menu-index-wrapper{
  height: 100%;
  >div{
    height: 100%;
    display: flex;
  }
  .el-row{
    height: 100%;
    clear:both;
  }
  .app-sidebar{
    height:100%;
  }
  .app-content{
    height:100%;
  }
  .sidebar-wrapper {
    width:$sidebarWidth;
    position: relative;
    height: 100%;
    @include gradient_bg_color("sidebar-bg1",'sidebar-bg2',180deg);
    /*background: url('../../../../assets/images/sidebar/sidebar_bg.png') no-repeat center center;
    background-size: 100% 100%;*/
  }
  .sidebar-wrapper.fold{
    width: $sidebarCollapseWidth;
  }
  .sidebar-wrapper.unfold{
    width: $sidebarWidth;
  }
  .drawer-sidebar-wrapper {
    width:$sidebarWidth;
    position: relative;
    height: 100%;
    @include gradient_bg_color("sidebar-bg1",'sidebar-bg2');
  }
  @include mediaScreen(xs){
    .sidebar-wrapper {
      display: none;
    }
  };
  @include mediaScreen(sm){
    .sidebar-wrapper {
      display: none;
    }
  };
  .collapse-icon{
    position: absolute;
    cursor: pointer;
    width:$collapseIconWidth;
    height:30px;
    text-align: center;
    line-height:30px;
    right:calc((100% - #{$collapseIconWidth})/2);
    bottom:$collapsePad;
    @include font_color('sidebar-text-color-primary');
    font-size:20px;
  }
  .icon-fold{
    right:$collapsePad;
  }
  .content-wrapper {
    // width:calc(100% - #{$sidebarWidth} - 20px);
    flex: 1;
    height: calc(100% - 20px);
    margin: 10px;
    padding: 10px 20px;
    overflow: auto;

    @include gradient_bg_color('content-bg1','content-bg2');
    @include scrollbarStyle(10px, 4px);
  }
  .content-wrapper.fold{
    width: calc(100% - #{$sidebarCollapseWidth} - 20px);
  }
  .content-wrapper.unfold{
    width: calc(100% - #{$sidebarWidth} - 20px);
  }
}
</style>
